﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery创意线条步骤流程图动画特效</title>

<script src="js/jquery.min.js"></script>

<style>
body {
  background: #d33144;
}

.process {
  width: 800px;
  margin: 3em auto;
  cursor: default;
}

.process-items {
  display: table;
  margin: 0 0 10px;
  padding: 0;
  list-style-type: none;
  color: #fff;
  font-size: 18px;
  text-align: center;
}
.process-items li {
  display: table-cell;
  width: 25%;
  vertical-align: bottom;
  padding: 0 .5em;
  -webkit-transform: scale(0.65) translateY(40px);
          transform: scale(0.65) translateY(40px);
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
}
.process-items li.active {
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0);
}
.process-items em {
  display: block;
  margin-top: .5em;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="process">
    <ol class="process-items">
        <li class="active">第一步 1
        <em>just do it</em></li>
        <li>第二步 2
        <em>yesterday you said tomorrow</em></li>
        <li>第三步 3
        <em>just do it</em></li>
        <li>第四步 4
        <em>make your dreams come true</em></li>
    </ol>
    <canvas id="canvas" width="800" height="55"></canvas>
</div>

<script>
var process = $('.process');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var SECTION_WIDTH = 200;

var sections = [];
var create = function(start) {
  var section = {
    start: start,
    width: SECTION_WIDTH,
    height: 45,
    hMax: 35,
    hMod: 0,
    progress: 0,
    dot: {
      x: 0,
      y: 0
    }
  };
  section.end = section.start + section.width;
  section.dot.x = section.start + section.width/2;
  section.dot.y = section.height;
  sections.push(section);
};

var draw = function(s) {
  var wMod = s.width * 0.3;
  ctx.beginPath();
  ctx.moveTo(s.start, s.height);
  ctx.bezierCurveTo(
    s.start+wMod, s.height,
    s.start+wMod, s.height - s.hMod,
    s.start + s.width/2, s.height - s.hMod
  );
  ctx.bezierCurveTo(
    s.end-wMod, s.height - s.hMod,
    s.end-wMod, s.height,
    s.end, s.height
  );
  ctx.lineWidth = 4;
  ctx.strokeStyle = 'white';
  ctx.stroke();
  
  ctx.beginPath();
  ctx.fillStyle = 'white';
  ctx.arc(s.dot.x, s.dot.y, 8, 0, Math.PI * 2);
  ctx.fill();
};

function quad(progress) {
  return Math.pow(progress, 2);
}
function makeEaseOut(delta) { 
  return function(progress) {
    return 1 - delta(1 - progress);
  }
}
var quadOut = makeEaseOut(quad);

var bend = function(s) {
  if(s.progress < s.hMax) {
    var delta = quadOut(s.progress/s.hMax);
    s.hMod = s.hMax*delta;
    s.dot.y = s.height - s.hMax*delta;
    s.progress++;
  }
};
var reset = function(s) {
  if(s.progress > 0) {
    var delta = quadOut(s.progress/s.hMax);
    s.hMod = s.hMax*delta;
    s.dot.y = s.height - s.hMax*delta;
    s.progress -= 2;
  } else {
    s.hMod = 0;
    s.dot.y = s.height;
    s.progress = 0;
  }
};

var currentSection = 0;
process.on('mousemove', function(event) {
  var section = Math.floor((event.clientX - process.offset().left) / SECTION_WIDTH);
  currentSection = section;
  process.find('.active').removeClass('active');
  process.find('li').eq(section).addClass('active');
});

create(0);
create(200);
create(400);
create(600);

var loop = function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  sections.forEach(function(s, index) {
    if(currentSection === index) {
      bend(s);
    } else {
      reset(s);
    }
    draw(s);
  });
  
  window.requestAnimationFrame(loop);
};
loop();
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>